<template>
  <el-container>
    <!-- <el-header>
      <h1>OMS 管理平台</h1>
      <div class="topRight">
        <i class="iconfont iconquanping"></i>
        <i class="iconfont iconxiazai"></i>
        <i class="iconfont iconwenhao"></i>
        <span class="infomation">
          <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"> </el-avatar>
          <span>开局一条狗</span>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                <el-dropdown-item command="b">狮子头</el-dropdown-item>
                <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </span>
      </div>
    </el-header> -->
    <el-container>
      <el-main>空白页</el-main>
    </el-container>
  </el-container>
</template>

<script>
import { reactive, toRefs } from 'vue'
// import NavHead from '../components/Popup'
// import Pagination from '../components/Pagination'

export default {
  name: 'Index',
  components: {},
  setup() {
    const state = reactive({
      visible: false,
      radio: '1'
    })
    const eventPopup = () => {
      state.visible = true
    }
    const closed = (val) => {
      state.visible = val
    }
    const handleCommand = (command) => {
      this.$message('click on item ' + command)
    }
    return {
      ...toRefs(state),
      eventPopup,
      closed,
      handleCommand
    }
  }
}
</script>

<style lang="less" scoped>
// .el-header {
//   display: flex;
//   justify-content: space-between;
//   h1 {
//     font-size: 30px;
//     font-weight: bold;
//     color: #31c0fd;
//     line-height: 60px;
//   }
//   .topRight {
//     line-height: 60px;
//     display: flex;
//     align-items: center;
//     position: relative;
//     i {
//       display: inline-block;
//       width: 28px;
//       height: 28px;
//       border-radius: 50%;
//       background-color: #fff;
//       font-size: 20px;
//       color: gray;
//       margin-left: 10px;
//       vertical-align: middle;
//     }
//     i:last-child {
//       margin-left: 0px;
//       transform: translate(3px, 3px);
//     }
//     i::before {
//       display: inline-block;
//       width: 28px;
//       height: 28px;
//       transform: translateX(4px);
//       position: absolute;
//       top: 0px;
//     }
//     .infomation {
//       display: inline-block;
//       width: 140px;
//       background-color: #fff;
//       border-radius: 20px;
//       vertical-align: middle;
//       margin-left: 20px;
//       line-height: 40px;
//       span {
//         margin-left: 10px;
//       }
//       .el-avatar {
//         vertical-align: middle;
//         margin-left: 5px;
//         width: 26px;
//         height: 26px;
//       }
//     }
//   }
// }

// .el-aside {
//   background-color: #fff;
//   border-radius: 24px;
//   margin: 0 5px;
//   color: #333;
//   text-align: center;
//   line-height: 200px;
// }

// .el-main {
//   background-color: #fff;
//   color: #333;
//   text-align: center;
//   line-height: 160px;
//   margin: 0 5px;
// }
// .el-container {
//   height: 100%;
// }
</style>
